<template>
  <div class="uploadExcel">
    <div>excel报表上传及内容解析</div>
    <p class="tip">
      此处仅是一个测试，实际业务开发，需要根据报表的结构，返回数据的不同做逻辑处理。不会影响报表的内容读取.
    </p>
    <el-button style="margin: 20px 0" type="primary" @click="importExcel">导入报表信息</el-button>
    <UploadExcel ref="uploadExcel" style="position: fixed; opacity: 0" @onSuccess="backExcelData"></UploadExcel>
    <div>
      <p>报表名称：{{ initData.excelInfo.fileName }}</p>
      <p>报表信息:</p>
      <div class="uploadExcel-header">
        <div v-for="(item, index) in initData.excelInfo.header" :key="index">
          {{ item }}
        </div>
      </div>
      <div class="uploadExcel-results">
        <div v-for="(item, index) in initData.excelInfo.results" :key="index" class="items">
          <div v-for="(it, ind) in initData.excelInfo.header" :key="ind">
            {{ item[it] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import UploadExcel from '@/components/UploadExcel/index.vue'

// 报表组件
const uploadExcel = ref()

const initData = reactive({
  excelInfo: {
    fileName: '', // 表表名称
    header: [], // 表头
    results: [] // 报表数据
  }
})
// 导入导表信息
const importExcel = () => {
  uploadExcel.value &&
    uploadExcel.value.$refs['excelUploadInput'] &&
    uploadExcel.value.$refs['excelUploadInput'].click()
}
// 接受报表信息
const backExcelData = (data: any) => {
  console.log(data, '=========')
  initData.excelInfo = { ...data }
}
</script>

<style lang="scss" scoped>
.uploadExcel {
  .tip {
    font-size: 12px;
    color: rgb(80, 79, 77);
  }
  .uploadExcel-header {
    display: flex;
    > div {
      width: 100px;
      border: 1px solid #aaa;
      text-align: center;
    }
  }
  .uploadExcel-results {
    .items {
      display: flex;
      > div {
        width: 100px;
        border: 1px solid #aaa;
        text-align: center;
        overflow: hidden;
      }
    }
  }
}
</style>
